<template>
  <div>

    <el-row>
      <el-col :span="24">
        <el-form :inline="true">

          <el-form-item label=" 积分商品名称：">
            <el-input v-model="param.scoreProductName" placeholder="请输入积分商品名称" @change="findByCondition"></el-input>
          </el-form-item>
          <el-form-item label="最低积分：">
            <el-input v-model="param.lowScorePrice" placeholder="请输入兑换所需最低积分" @change="findByCondition"></el-input>
          </el-form-item>
          <el-form-item label="最高积分：">
            <el-input v-model="param.upScorePrice" placeholder="请输入兑换所需最高积分" @change="findByCondition"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="showAddScoreProductWindow">新增商品</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px;">
      <el-col :span="24">

        <el-table :data="page.records" style="width: 100%">
          <el-table-column label="商品图片" width="180" align="center">
            <template slot-scope="scope">
               <el-avatar :src="scope.row.ppicture" :size="120" fit="cover"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="scoreProductName" label="积分商品名称" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="scorePrice" label="兑换所需积分" width="180" align="center" label-align="center">
          </el-table-column> -->
          <el-table-column prop="pDetails" label="商品描述" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="scoreProductNum" label="商品库存" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column label="状态" width="100" align="center" label-align="center">
            <template slot-scope="scope">{{ getStateText(scope.row.scoreProductState)}}</template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column label="操作" width="230" align="center" label-align="center">
            <template slot-scope="scope">
              <el-button type="text" v-if="scope.row.proState==0"
                @click="disabledScoreProduct(scope.row)">下架</el-button>
              <el-button type="text" v-if="scope.row.proState==1"
                @click="showAbleScoreProductWindow(scope.row)">上架</el-button>
              <el-button type="text" @click="showChangeScoreProductInfoWindow(scope.row)">编辑</el-button>
              <el-button type="text" @click="deleteScoreProduct(scope.row)">删除</el-button>
              <el-button type="text" @click="showUpdateScoreProductImageWindow(scope.row)">修改图片</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>


    <!--新增商品窗口-->
    <el-dialog title="新增商品" :visible.sync="addScoreProductWindow">
      <el-form :model="addScoreProductForm" label-width="150px">
        <el-row :gutter="20" type="flex">
          <el-col :span="12">
            <el-form-item label="积分商品名称:">
              <el-input v-model="addScoreProductForm.scoreProductName" placeholder="请输入积分商品名称"></el-input>
            </el-form-item>
            <el-form-item label="兑换所需积分:">
              <el-input-number :step="1" v-model="addScoreProductForm.carPrice" placeholder="请输入兑换所需积分"
                :controls="false"></el-input-number>
            </el-form-item>
            <el-form-item label="商品描述:">
              <el-input v-model="pDetails" placeholder="请输入商品描述"></el-input>
            </el-form-item>
            <el-form-item label="商品库存:">
              <el-input v-model="addScoreProductForm.scoreProductNum" placeholder="请输入商品库存"></el-input>
            </el-form-item>
            <el-form-item label="商品图片:">
              <el-upload :headers="headers" name="pPicture" :data="addScoreProductForm" class="upload-demo" ref="upload"
                action="http://192.168.60.79:80/product/scoreStore/addScoreProduct.api" :auto-upload="false"
                :on-success="addScoreProductSuccess" :on-error="addScoreProductError">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success"
                  @click="insertScoreProduct">新增积分商品</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addScoreProductWindow = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--商品上架窗口-->
    <el-dialog title="商品上架" :visible.sync="ableScoreProductWindow">
      <el-form :model="ableScoreProductParam" label-width="150px">
        <el-row :gutter="30" type="flex">
          <el-col :span="12">
            <el-form-item label="输入新商品总览名称:">
              <el-input v-model="ableScoreProductParam.scoreProductNum" placeholder="请输入上架数量"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ableScoreProductWindow = false">取 消</el-button>
        <el-button @click="ableScoreProduct">上 架</el-button>
      </div>
    </el-dialog >

      <!--新增商品窗口-->
      <el-dialog title="新增商品" :visible.sync="addScoreProductWindow">
        <el-form :model="addScoreProductForm" label-width="150px">
          <el-row :gutter="20" type="flex">
            <el-col :span="12">
              <el-form-item label="积分商品名称:">
                <el-input v-model="addScoreProductForm.scoreProductName" placeholder="请输入积分商品名称"></el-input>
              </el-form-item>
              <el-form-item label="兑换所需积分:">
                <el-input-number :step="1" v-model="addScoreProductForm.scorePrice" placeholder="请输入兑换所需积分"
                  :controls="false"></el-input-number>
              </el-form-item>
              <el-form-item label="商品描述:">
                <el-input v-model="pDetails" placeholder="请输入商品描述"></el-input>
              </el-form-item>
              <el-form-item label="商品库存:">
                <el-input v-model="addScoreProductForm.scoreProductNum" placeholder="请输入商品库存"></el-input>
              </el-form-item>
              <el-form-item label="商品图片:">
                <el-upload :headers="headers" name="pPicture" :data="addScoreProductForm" class="upload-demo" ref="upload"
                  action="http://192.168.60.79:80/product/scoreStore/addScoreProduct.api" :auto-upload="false"
                  :on-success="addScoreProductSuccess" :on-error="addScoreProductError">
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <el-button style="margin-left: 10px;" size="small" type="success"
                    @click="insertScoreProduct">新增积分商品</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addScoreProductWindow = false">取 消</el-button>
        </div>
      </el-dialog>


      <!--修改积分商品信息-->
    <el-dialog title="修改积分商品信息" :visible.sync="changeScoreProductInfoWindow">
      <el-form :model="changeScoreProductInfoParam" label-width="150px">
        <el-row :gutter="30" type="flex">
          <el-col :span="12">
            <el-form-item label="积分商品名称:">
              <el-input v-model="changeScoreProductInfoParam.scoreProductName" placeholder="请输入积分商品名称"></el-input>
            </el-form-item>
            <el-form-item label="兑换所需积分:">
              <el-input-number :step="1" v-model="changeScoreProductInfoParam.carPrice" placeholder="请输入兑换所需积分"
                :controls="false"></el-input-number>
            </el-form-item>
            <el-form-item label="商品描述:">
              <el-input v-model="pDetails" placeholder="请输入商品描述"></el-input>
            </el-form-item>
            <el-form-item label="商品库存:">
              <el-input v-model="changeScoreProductInfoParam.scoreProductNum" placeholder="请输入商品库存"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeScoreProductInfoWindow = false">取 消</el-button>
        <el-button @click="changeScoreProductInfo">修 改</el-button>
      </div>
    </el-dialog>

    <!--分页-->
    <el-pagination @size-change=" handleSizeChange" @current-change="handleCurrentChange" :current-page="param.current"
      :page-sizes="[5, 8, 10]" :page-size="param.size" layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>

    <!--更改积分商品图片-->
        <el-dialog title="更改积分商品图片" :visible.sync="updateScoreProductImageWindow">
          <el-form :model="updateScoreProductImageForm" label-width="150px">
            <el-row :gutter="20" type="flex">
              <el-col :span="12">
                <el-form-item label="品牌logo:">
                  <el-upload :headers="headers" name="file" :data="updateScoreProductImageForm" class="upload-demo"
                    ref="upload" action="http://192.168.60.79:80/product/scoreStore/changeScoreProductImage.api" :auto-upload="false"
                    :on-success="updateScoreProductImageSuccess" :on-error="updateScoreProductImageError">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success"
                      @click="updateScoreProductImage">修改汽车品牌logo</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="updateScoreProductImageWindow = false">取 消</el-button>
          </div>
        </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "ScoreStore",
    data() {
      return {
        param: { //页面参数
          pageNum: 1,
          pageSize: 5,
          scoreProductName: "", //积分商品名称
          lowScorePrice: "", //兑换所需最低积分
          upScorePrice: "", //兑换所需最高积分
        },
        page: {}, //页面
        addScoreProductWindow: false, //新增积分商品窗口
        addScoreProductForm: { //新增积分商品参数对象
          scoreProductName: "", //积分商品名称
          scorePrice: "", //兑换所需积分
          pPicture: "", //商品图片
          pDetails: [], //商品描述
          scoreProductNum: "", //商品库存
        },
        pDetails: "",
        scoreProductId: "", //积分商品ID
        ableScoreProductWindow: false, //上架窗口
        ableScoreProductParam: { //上架参数
          scoreProductId: "", //积分商品ID
          scoreProductNum: "", //商品库存
        },
        changeScoreProductInfoWindow:false,//修改积分商城信息窗口
        changeScoreProductInfoParam:{//修改商品信息参数
          scoreProductId:"",//积分商品编号
          scoreProductName: "", //积分商品名称
          scorePrice: "", //兑换所需积分
          pPicture: "", //商品图片
          pDetails: [], //商品描述
          scoreProductNum: "", //商品库存
        },
        updateScoreProductImageWindow:false,//更改积分商品图片窗口
        updateScoreProductImageForm:{//更改积分商品图片参数
          scoreProductId:"",//积分商品id
          file:"",//图片文件
        },
        headers: {}
      }

    },
    methods: {
      //展开修改积分商城信息窗口
      showUpdateScoreProductImageWindow(row){
        this.updateScoreProductImageForm.scoreProductId = JSON.parse(JSON.stringify(row)).scoreProductId;
        this.updateScoreProductImageWindow=true
      },
       //修改商品图片
           updateScoreProductImage() {
             this.addScoreProductForm.pDetails = this.pDetails
             this.$refs.upload.submit();
           },
           // 修改商品图片成功后的回调
         updateScoreProductImageSuccess(response) {
             if (response.code == "200") {
               this.updateScoreProductImageWindow = false; // 关闭修改商品图片对话框
               this.SuccessTip(response); // 提示新增成功信息
               this.loadScoreProduct(); // 刷新页面
               // 清空上传文件列表
               this.$refs.upload.clearFiles();
             } else {
               this.ErrorTip(response); // 提示新增失败信息
             }
           },
           // 修改商品图片失败后的回调
        updateScoreProductImageError(response) {
             this.ErrorTip(response);
           },
      //修改积分商城信息
      changeScoreProductInfo(){
          this.changeScoreProductInfoParam.pDetails = this.pDetails
          this.$http.post("/product/scoreStore/changeScoreProductInfo.api", this.changeScoreProductInfoParam).then(resp => {
            if (resp.data.code == 200) {
              this.loadData()
              this.SuccessTip(resp.data);
            } else {
              this.ErrorTip(resp.data)
            }
          })
      },
      //展开修改积分商城信息窗口
      showChangeScoreProductInfoWindow(row){
        this.changeScoreProductInfoParam = JSON.parse(JSON.stringify(row));
        this.changeScoreProductInfoWindow=true
      },
      //删除积分商品
      deleteScoreProduct(row) {
        this.scoreProductId = JSON.parse(JSON.stringify(row)).scoreProductId
        this.$http.get("/product/scoreStore/deleteScoreProduct.api", {
          params: {
            scoreProductId: this.scoreProductId
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.loadData()
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //上架积分商品
      ableScoreProduct() {
        this.$http.get("/product/scoreStore/ableScoreProduct.api", {
          params: {
            scoreProductId: this.ableScoreProductParam.scoreProductId,
            scoreProductNum: this.ableScoreProductParam.scoreProductNum
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.loadData()
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //展开上架窗口
      showAbleScoreProductWindow() {
        this.ableScoreProductParam.scoreProductId = JSON.parse(JSON.stringify(row)).scoreProductId
        this.ableScoreProductWindow = true
      },
      //下架积分商品
      disabledScoreProduct(row) {
        this.scoreProductId = JSON.parse(JSON.stringify(row)).scoreProductId
        this.$http.get("/product/scoreStore/disabledScoreProduct.api", {
          params: {
            scoreProductId: this.scoreProductId
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.loadData()
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //展开新增积分商品窗口
      showAddScoreProductWindow() {
        this.addScoreProductWindow = true;
      },
      //新增积分商品
      insertScoreProduct() {
        this.addScoreProductForm.pDetails = this.pDetails
        this.$refs.upload.submit();
      },
      // 新增积分商品成功后的回调
      addScoreProductSuccess(response) {
        if (response.code == "200") {
          this.addScoreProductWindow = false; // 关闭新增积分商品对话框
          this.SuccessTip(response); // 提示新增成功信息
          this.loadScoreProduct(); // 刷新页面
          // 清空上传文件列表
          this.$refs.upload.clearFiles();
        } else {
          this.ErrorTip(response); // 提示新增失败信息
        }
      },
      // 新增积分商品失败后的回调
      addScoreProductError(response) {
        this.ErrorTip(response);
      },
      //搜索商品
      findByCondition() {
        this.param.pageNum = 1;
        this.loadData();
      },
      //改变页码大小
      handleSizeChange(pageSize) {
        this.param.pageSize = pageSize;
        this.loadData();
      },
      //该变页数
      handleCurrentChange(pageNum) {
        this.param.pageNum = pageNum;
        this.loadData();
      },
      //查所有商品
      loadData() {
        this.$http.post("/product/scoreStore/scoreProductList.c", this.param).then(resp => {
          if (resp.data.code == 200) {
            this.page = resp.data.data
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //状态展示
      getStateText(state) {
        switch (state) {
          case 0:
            return '正常';
          case 1:
            return '禁用';
          case 2:
            return '删除';
          default:
            return '未知状态';
        }
      },
      SuccessTip(data) { //成功
        if (data.code === 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'success'
          });
        }
      },
      ErrorTip(data) { //失败
        if (data.code !== 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'error'
          });
        }
      },
    },
    created() {
      this.loadData();
      this.headers["token"] = localStorage.getItem("token");
    }
  }
</script>


<style scoped>
  .custom-input .el-input__inner {
    border: none;
    background-color: transparent;
    pointer-events: none;
  }
</style>
